{% extends "layouts/base.njk" %}

{% block title_bar %}
  {% include 'partials/breadcrumbs.njk' %}
{% endblock %}

{% block content %}
<div class="tags-grid measure-1280 gap-top-300 lg:gap-top-400 pad-left-400 pad-right-400 center-margin">
  {% for tag in pagination.items %}
    {# Get the current first letter of the tag title #}
    {% set tagLetter = tag.title[0] | capitalize %}

    {# If this is not the first iteration and the letter title and it doesn't match the tag's letter close the div #}
    {% if not loop.first and letterTitle !== tagLetter %}
        </ul>
      </div>
    {% endif %}

    {# If the letter title doesn't match the tag's letter create a new div and set the letter title to the current letter #}
    {% if letterTitle !== tagLetter %}
      {% set letterTitle = tagLetter %}
      <div class="tag-card">
        <h2 class="type--label color-secondary-text"><span class="visually-hidden">Tags that start with: </span>{{ letterTitle }}</h2>
        <ul role="list" class="pad-0 gap-top-300 gap-bottom-0">
    {% endif %}
    
    <li>
      <a class="type--h6 color-primary surface" href="{{ helpers.join('/', locale, 'tags', tag.key, '/')  }}">{{ tag.title }}</a>
    </li>
    
    {# If this is the last element of our loop close the div #}
    {% if loop.last %}
      </div>
    {% endif %}
  {% endfor %}
</div>
{% include 'partials/pagination.njk' %}
{% endblock %}